<!-- status-icon -->

<template>
  <div class="denglu" >
    <div class="tirlgji">
        物流管理系统
    </div>
    <div class="kofsjo">
      <el-form ref="loginForm" :model="loginForm" status-icon :rules="loginRules" class="mkoipp">
        <h2>管理员登录</h2>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" autocomplete="off" placeholder="Username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="Password" ></el-input>
        </el-form-item>
        <el-form-item  prop="captcha">
          <el-input v-model="loginForm.captcha" autocomplete="off" class="opeyrbf" placeholder="验证码"></el-input>
          <div class="captcha" @click="captcha"></div> 
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" class="rfsawef">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

  
</template>

<script>
import axios from 'axios';
import { reactive } from 'vue';

export default {
  name: 'LoginForm',
  data() {
    const loginForm = reactive({
      username: '',
      password: '',
      captcha: ''
    });

    const trails = 'default';

    const loginRules = {
      username: [{ required: true, message: 'Please input your name!!', trigger: 'blur' }],
      password: [{ required: true, message: 'Please input your password!!', trigger: 'blur' }],
      captcha: [{ required: true, message: 'please input trails!!', trigger: 'blur' }]
    };
    return {
      loginForm,
      loginRules,
      trails
    };
  },
  mounted() {
    this.captcha();
  },
  methods: {
    captcha(){
      axios.get('http://localhost:3000/captcha').then(res => {
      const captcha= res.data.data

      this.trails = res.data.trails

      document.getElementsByClassName('captcha')[0].innerHTML = `${captcha}`;
    });
    },
    
    login () {
      let username = this.loginForm.username;

      let password = this.loginForm.password;
      
      let cap= this.loginForm.captcha;
      if(cap.toLowerCase()!==this.trails){
        this.loginForm.captcha = '';
        this.captcha();
        alert("Login failed,verification code error!!!")        
      }else{
        axios.post('http://localhost:3000/login', {username,password}).then(res => {
          console.log(res);
          if(res.data.code===299){
            alert("Login sucessful, esteemed user!!")
          }
          else{
            alert("Login failed,Username or Password incorrect!!");
            this.loginForm.username = '';
            this.loginForm.password = '';
            this.loginForm.captcha = '';
            this.captcha();
          }
        });
      }
      
      
    }
  }
};
</script>

<style scoped>
body{
  margin:0px;

  padding:0px

}
.denglu {
  margin: 0px;
  padding:0px;
  width:95%;
  height:81vh;
  display: flex;
  align-items: center;
  justify-content: center;  
  height: 100vh;
  
}

.tirlgji {
  margin:0px;
  padding-left: 11%;
  background-image: url('../assets/bg.jpg');
  width: 100%;
  height:100vh;
  background-size: 100% 100%;
  line-height: 60vh;
  font-size: 31px;
  font-weight: 401;
  text-align: left;
  color: white;
}


.kofsjo {
  font-size: 21px;
  width: 31%;
  margin-right: 3%;
  margin-left: 3%;
}

.mkoipp {
  width: 100%;
}

.opeyrbf {
  width: 41%;
}

.text{
  width: 100%;
  margin:9%
}

.captcha{
  width: 25%;
  margin-left: 6%;
  cursor: pointer;
}

.rfsawef {
  width: 100%;

}

.captcha-img {
  cursor: pointer;
  margin-left: 9px;
  vertical-align: middle;
}
</style>